<template>
  <!-- 银行流水 -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        
        <a-col flex="135px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" >
            <JDictSelectTag v-model:value="queryParam.ddlxIds" dictCode="ddlxType@ddlxUser" mode="multiple" :maxTagCount="0" placeholder="全部" :autofocus="false" />
          </a-form-item>
        </a-col>

        <a-col flex="120px">
          <a-form-item label="类型" :label-col="{ style: { width: '40px' } }" >
            <JDictSelectTag
              placeholder="全部"
              v-model:value="queryParam.type"
              dictCode="sealType"
              :dropdownStyle="{ width: '80px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
              :showArrow="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="320px">
          <a-form-item label="用章日期" :label-col="{ style: { width: '70px' } }">
            <a-date-picker v-model:value="queryParam.beginDate" valueFormat="YYYY-MM-DD" @change="changeBegin" style="width: 109px; padding: 4px 5px;" /> ~
            <a-date-picker v-model:value="queryParam.endDate" :disabled-date="disabledEndDate" valueFormat="YYYY-MM-DD" style="width: 112px; padding: 4px 5px;" />
          </a-form-item>
        </a-col>

        <a-col flex="290px">
          <a-form-item label="公司" :label-col="{ style: { width: '40px' } }">
            <JDictSelectTag
              placeholder="全部"
              v-model:value="queryParam.companyId"
              dictCode="companys"
              :dropdownStyle="{ width: '80px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
              :showArrow="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="150px">
          <a-form-item label="用章人" :label-col="{ style: { width: '60px' } }" :wrapper-col="{ span: 17 }">
            <a-input placeholder="" v-model:value.trim="queryParam.useName"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float: right; width: 100px">
          <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
            <a-button type="primary" preIcon="ant-design:search" @click="searchQuery" style="margin-right: 8px">查询</a-button>
            <a-button color="success" preIcon="ant-design:plus-outlined" @click="handleAdd">新增</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!--引用表格 :onRowClick="handleClick" :rowClassName="rowClassName"-->
  <BasicTable @register="registerTable" :onRowDbClick="handleDblclick" :onRowClick="handleClick" :rowClassName="rowClassName" >
    <!--操作栏-->
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
  </BasicTable>

  <!-- 表单区域 -->
  <SealModal @register="registerModal" @success="handleSuccess"></SealModal>
  <SealView @register="registerView" @success="handleSuccess"></SealView>
</template>

<script lang="ts" name="full-seal" setup>
  import { ref, computed, unref, reactive, toRaw } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { columns } from './Seal.data';
  import { list, deleteOne, updateStat } from './Seal.api';
  import { filterObj } from '/@/utils/common/compUtils';
  import { momentSearchQueryDate } from "/@/utils/dateUtil";

  import SealModal from './modules/SealModal.vue';
  import SealView from './modules/SealView.vue';
  import dayjs from 'dayjs';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';

  //初始化 -------------------------------------------------------------
  //定义查询表单，查询条件
  const queryParam = reactive<any>({
    ddlxIds: '',
    beginDate : momentSearchQueryDate('sub'),
    endDate: momentSearchQueryDate('add'),
    useName: '',
    type: '',//add
  });

  /* 日期参数 */
  function disabledEndDate(endDate) {
    const beginDate = queryParam.beginDate;
    if (!endDate || !beginDate) {
      return false;
    }
    return dayjs(beginDate).valueOf() > endDate.valueOf();
  }

  //开始时间
  function changeBegin() {
    if (queryParam.beginDate) {
      queryParam.endDate = queryParam.beginDate;
    }
  }

  //注册model
  const [registerModal, { openModal }] = useModal();
  //注册table数据
  const { tableContext } = useListPage({
    tableProps: {
      api: list,
      columns,
      size: 'small',
      showTableSetting: false,
      showIndexColumn: true, //行号
      showActionColumn: true,
      useSearchForm: false,
      //resizeHeightOffset: 40,
      beforeFetch: (params) => Object.assign(params, filterObj(queryParam)),
      actionColumn: {
        width: 65,
      },
    },
  });

  //注册table数据
  const [registerTable, { reload, setProps, redoHeight }] = tableContext;

  function searchQuery() {
    //filterObj
    let params = toRaw(filterObj(queryParam));
    if (typeof params.shbj === 'undefined') {
      params.shbj = '';
    }
    setProps({ searchInfo: params });
    reload();
    redoHeight();
  }

  /**
   * 新增事件
   */
  function handleAdd() {
    openModal(true, {
      isUpdate: false,
      showFooter: true,
    });
  }

  /**
   * 编辑事件
   */
  function handleEdit(record: Recordable) {
    openModal(true, {
      record,
      isUpdate: true,
      showFooter: true,
    });
  }

  //注册view
  const [registerView,  {openModal: handleView} ] = useModal();

  //双击行
  function handleDblclick(record) {
    handleView(true, { id: record.id });
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, reload);
  }

  //新增编辑成功后，刷新列表
  function handleSuccess(data) {
    //console.info("handleSuccess@@@", data)
    searchQuery();
  }

  //单击行
  let selectRows = reactive<any>({ id: '', username: '' });
  function handleClick(record) {
    selectRows.id = record.id;
  }

  function rowClassName(record) {
    return record.id === selectRows.id ? 'row-selected' : '';
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '编辑',
        icon: "ant-design:form-outlined",
        color: "success",
        disabled: ",10,21,".indexOf(record.stat) < 0, 
        onClick: handleEdit.bind(null, record),
      },
      {
        label: '删除',
        color: "error",
        icon: "ant-design:rest-twotone",
        disabled: ",10,21,".indexOf(record.stat) < 0,
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
        },
      },
    ];
  }
</script>
<style scoped></style>
